<template>
    <el-card class="box-card"  ref="box-card" key=''>
    <!--      头部区域，显示用户的昵称和头像-->
    <template #header>
      <div class="card-header">
        <avatar-component :size="40" :user-name="userName"></avatar-component>
        <span v-text="name"></span>
<!--        <span>{{Url}}</span>-->
<!--        <span v-text="worksId"></span>-->
        <el-button class="button" text @click="showReportBox=true">举报</el-button>
      </div>
    </template>
    <!--    中间区域，显示用户发布的内容-->
    <!--    <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>-->
    <div class="moments"><span v-text="moment"></span></div>
    <div class="image">   <img ref="img" :src="Url" width="300"  alt="图片加载失败" /></div>


    <!--    底部区域，放置点赞，评论按钮-->
    <div class="card-bottom">

      <!--   操作区-->
      <div class="card-operate">
        <span class="message">浏览n次</span>
        <el-button class="button" text><Pointer @click="giveLike" style="width: 1.5em; height: 1.5em;"/></el-button>
        <el-button class="button" text @click="eidt"><ChatLineSquare style="width: 1.5em; height: 1.5em; "/></el-button>
        <el-button class="button" text> <Share  @click="showUrl"     style="width: 1.5em; height: 1.5em; " /></el-button>
        <el-button class="button" text>   <Star style="width: 1.5em; height: 1.5em; " /></el-button>
      </div>

      <!--      点赞显示区-->
      <div class="card-like">
        <div class="comment-box" v-for="i in this.SonLike.length" :key="i">
            {{SonLike[i-1]}}
        </div>
<!--        刷新点赞区-->
        <div v-show="isLike">  {{nowEditName}}</div>
       <p1>等人赞了你</p1>
      </div>


      <!--      评论显示区-->
      <div class="card-comment">

        <div v-for="i in SonComment.length" :key="i" class="text item">
          <!--              <span v-text="SonComment[i-1]"></span> ：<span v-text="SonComment[i-1]"></span>-->
          <div class="comment-box">{{SonCommentor[i-1]}}  : {{SonComment[i-1]}}</div>
          <!--              <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>-->
          <!--              <span class="son-comment"> {{SonCommentor[i-1]}}{{SonComment[i-1]}}</span>-->
        </div>
<!--        局部刷新区，实时更新输入的评论-->
        <div class="comment-box" v-for="i in show_edit_comment.length" :key="i">
          <span ref="show_edit_comment">{{show_edit_comment[i-1]}}</span>
        </div>
      </div>


      <!--编辑评论区-->
      <div class="card-commentEdit">
        <span >评论区</span>
        <textarea  type="text" class="input-comment" v-model="now_edit_comment" @focus="heighter" @blur="restore" ref="comment" />
      </div>

      <!--发表评论按钮，默认隐藏-->
      <div class="button-publish"  > <el-button  v-show="isShow" ref="button-publish" type="primary"  @click="editComment()" style="display:inline">评论</el-button></div>
    </div>
  </el-card>
  <el-dialog v-model="showReportBox" style="width: 300px;height: 400px">
          <div style="border-bottom: solid 1px silver">
            <h2 style="float:left; margin-top: -40px">举报</h2>
          </div>
<!--        <h2>举报</h2>-->
          <div class="check-box" style="margin-top: -10px;float: left">
           <h3 style="float:left;">你为什么举报此消息？</h3>
            <el-radio-group v-model="report_type" class="ml-4">
              <el-radio label="色情低俗" size="large">色情低俗</el-radio>
              <el-radio label="政治敏感" size="large">政治敏感</el-radio>
              <el-radio label="诈骗行为" size="large">诈骗行为</el-radio>
              <el-radio label="广告行为" size="large">广告行为</el-radio>
              <el-radio label="木马行为" size="large">木马行为</el-radio>
              <el-radio label="其他行为" size="large">其他行为</el-radio>
            </el-radio-group>

          </div>
        <div >
          <h4 style="float:left;" >举报说明</h4>

          <el-input v-model="report_cause"></el-input><br><br><br>
          <el-button type="primary" @click="report()">提交</el-button>
          <el-button  @click="showReportBox=false">取消</el-button>
        </div>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'

import axios from "axios";
import AvatarComponent from "@/components/AvatarComponent";
import {ElMessage} from "element-plus";
export default {
  name: "ChatMoments",
  components: {AvatarComponent},
  /**
   * 注入父组件数据
   * name:父组件传来的当前子组件的用户名
   * moment:父组件传来的当前子组件的朋友圈内容
   * worksId:父组件传来的当前子组件的用户Id
   * like:父组件传来的所有like数据（点赞信息）
   * comment:父组件传来的所有comment数据（评论信息）
   * nowEditName:记录当前账户的用户名
   * *imageUrl:父组件传来的朋友圈图片url地址
   */
  props: ['name', 'moment','worksId','userName','like','comment','nowEditName','login_username','login_name','imageUrl'],
  data() {
    return {
      textarea: ref(""),
      /**
       *   now_edit_comment:记录评论输入框的内容
       *   show_edit_comment:输出评论输入框的内容
       *   isShow：控制按钮的显示
       */
      now_edit_comment:"",
      showReportBox:false,
      show_edit_comment:[],
      report_cause:"",
      report_type:"",
      isShow:false,
      isLike:false,
      /**
       * SonCommentor：通过Id接收父组件传来的发送者信息
       * SonCommen：通过Id接收父组件传来的评论内容
       * SonLike：通过Id接收父组件传来的点赞信息
       */
      SonCommentor:[],
      SonLike:[],
      SonComment:[],
      Url:""
      // Url:require("@/assets/"+this.imageUrl)
    }
  },created() {
    // this.Url=require("")
      // alert(this.userName)
    //将全局变量赋值到局部
    alert("传来的组件名为："+this.imageUrl)
    const _this = this
    //通过id过滤，得到放在该组件的数据（用户名、评论信息、点赞信息）
    for (let i = 0; i < this.comment.length; i++) {
      if (this.comment.at(i).worksId == this.worksId) {
        _this.SonCommentor.push(this.comment[i].commentName)
        _this.SonComment.push(this.comment[i].comments)
      }
    }
    for (let i = 0; i < this.like.length; i++) {
      if (this.like.at(i).worksId == this.worksId) {
        _this.SonLike.push(this.like[i].likeName)
      }

    }

  },watch: {

          userName(newVal,OldVal){
          const _this = this;
          for (let i = 0; i < this.comment.length; i++) {
            if (this.comment.at(i).worksId == this.worksId) {
              _this.SonCommentor.push(this.comment[i].commentName)
              _this.SonComment.push(this.comment[i].comments)
            }
          }
          for (let i = 0; i < this.like.length; i++) {
            if (this.like.at(i).worksId == this.worksId) {
              _this.SonLike.push(this.like[i].likeName)
            }

          }
          alert(this.comment);
        }
    },
  methods:{
    showUrl(){
  /*    console.log(this.$refs.img.src)
       console.log("../"+this.$refs.img.src.substring(22))
      this.$refs.img.src="../"+this.$refs.img.src.substring(22)*/
      // this.Url="../"+this.$refs.img.src.substring(22)
    },
    eidt(){
      //点击评论图标，评论框获取焦点
      this.$refs.comment.focus()
    },
    editComment(){
      const  _this=this
      //获取输入框的值
      _this.show_edit_comment.push(this.nowEditName+":"+this.now_edit_comment)
      //将评论信息传到后端，写入数据库
      axios({
        method: 'post',
        url: 'http://localhost:8081/editComment',
        params: {
          userId:this.login_username,
          worksId:this.worksId,
          commentName:this.nowEditName,
          comments:_this.now_edit_comment
      }})
          .then(function (response) {
            console.log(response.data);
          })
          .catch(function (error) {
            console.log(error);

          });
      this.$refs.comment.style.height="20px"
      this.isShow=false
      this.now_edit_comment=''
    },
    giveLike(){
      if(this.isLike==false){
        this.isLike=true
        //将点赞信息传入后端，写入数据库
        axios({
          method: 'post',
          url: 'http://localhost:8081/like',
          params: {
            worksId:this.worksId,

            likeName:this.name
          }})
            .then(function (response) {
              console.log(response.data); // 前台调试能够看到获取到数据了

            })
            .catch(function (error) {
              console.log(error);

            });
      }else {
        this.isLike=false
        axios({
          //将删除点赞的信息传入后端，写入数据库
          method: 'post',
          url: 'http://localhost:8081/deleteLike',
          params: {
            worksId:this.worksId,
            likeName:this.name
          }})
            .then(function (response) {
              console.log(response.data); // 前台调试能够看到获取到数据了

            })
            .catch(function (error) {
              console.log(error);

            });
      }
    },
    heighter(){
      this.$refs["comment"].style.height="60px"
      this.isShow=true
    },
    report(){
      // alert(this.report_type)
      axios({
        //将删除点赞的信息传入后端，写入数据库
        method: 'post',
        url: 'http://localhost:8081/giveReport',
        params: {
          reportedAdmin:this.userName,
          reportedName:this.name,
          worksId:this.worksId,
          reporterName:this.login_name,
          reporterAdmin:this.login_username,
          reportCause:this.report_cause,
          reportType:this.report_type

        }})
          .then(function (response) {
            console.log(response.data); // 前台调试能够看到获取到数据了
            ElMessage({
              message:"举报成功，我们将尽快处理",
              type:'success'
            })
            // this.showReportBox=false;
          })
          .catch(function (error) {
            console.log(error);

          });
      this.showReportBox=false;
    }
  }

}
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-operate {
  border-top:1px solid silver;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
.button-publish{
float: right;
  background-color: #A9A9A9;
}

.button{
  margin-left: 150px;
}
.card-like{
  border-top:1px solid silver;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
.card-comment{
  border-top:1px solid silver;
  /*让所有子盒子换行*/
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}.add-comment{
  float: right;
 }
.comment-box{
  /*border-top:1px solid silver;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
}
.card-commentEdit{
  border-top:1px solid silver;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input-comment{
  width: 500px;
  height: 20px;
  resize: none;
}
.message{
  font-size: 10px;
}

.box-card {
  width: 480px;
  background-color: #F6F6F6;
}
.moments{
  height: 100px;
}
</style>
